<template>
	<view>
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">返回</block>
			<block slot="content">年度数据</block>
		</cu-custom>
		<view class="margin">
			<view class="radius-lg shadow shadow-lg bg-white padding-sm">
				<view class="flex justify-between align-center bg-white solid-bottom padding-bottom-sm padding-lr-xs">
					<view class="action text-lg text-bold">
						<text class="cuIcon-titles text-blue"></text>工资（年收入）
					</view>
					<view class="action">
						<text class="text-sm text-gray">累计公司社保/公积金</text>
						<switch style="transform:scale(0.8)" class="sm" :class="isContainsCompany?'checked':''"
							:checked="isContainsCompany?true:false"
							@change="() => isContainsCompany = !isContainsCompany"></switch>
					</view>
				</view>
				<view class="cu-list grid col-3">
					<view class="cu-item">
						<view class="text-gray">收入</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.salaryAnnualIncomeAmount }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">纳税金额</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.salaryAnnualTaxAmount }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">到手金额</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.salaryAnnualEarnedAmount }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">公积金</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ isContainsCompany ? salarySummary.annualHousingAmount : salarySummary.annualPersonalHousingAmount }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">社保金额</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ isContainsCompany ? salarySummary.annualSocialAmount : salarySummary.annualPersonalSocialAmount }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">公司成本</view>
						<view class="text-bold text-price text-lg margin-top-xs">{{ salarySummary.annualCompanyCost }}
						</view>
					</view>
				</view>
				<view class="text-center margin-top-sm text-gray text-sm" @tap="toSalaryDetail">查看明细<text
						class="cuIcon-right"></text></view>
				</navigator>
			</view>

			<view class="radius-lg shadow shadow-lg bg-white padding-lr-sm padding-top-sm margin-top">
				<view class="flex justify-between align-center bg-white solid-bottom padding-bottom-sm padding-lr-xs">
					<view class="action text-lg text-bold">
						<text class="cuIcon-titles text-blue"></text>年终奖
					</view>
					<view class="action">
						<text class="text-sm text-gray">{{ isAloneCalcTax ? '单独计税' : '合并计税' }}</text>
						<switch style="transform:scale(0.8)" class="sm" :class="isAloneCalcTax?'checked':''"
							:checked="isAloneCalcTax?true:false" @change="() => isAloneCalcTax = !isAloneCalcTax">
						</switch>
					</view>
				</view>
				<view class="cu-list grid col-3">
					<view class="cu-item">
						<view class="text-gray">收入</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.yearEndBoundAmount || '0' }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">纳税金额</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.yearEndBoundTaxAmount || '0' }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">到手金额</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.yearEndBoundEarnedAmount || '0' }}</view>
					</view>
				</view>
			</view>

			<view class="radius-lg shadow shadow-lg bg-white padding-lr-sm padding-top-sm margin-top">
				<view class="flex justify-between align-center bg-white solid-bottom padding-bottom-sm padding-lr-xs">
					<view class="action text-lg text-bold">
						<text class="cuIcon-titles text-blue"></text>汇算清缴
					</view>
				</view>
				<view class="cu-list grid col-3">
					<view class="cu-item">
						<view class="text-gray">收入</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.summaryAmount || '0' }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">实际纳税</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ isAloneCalcTax ? salarySummary.summaryTaxAmount || '0' : salarySummary.summaryComprehensiveTaxAmount }}
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">到手金额</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							{{ salarySummary.summaryEarnedAmount || '0' }}</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">退税</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							<block v-if="!isAloneCalcTax && taxDiff < 0">
								{{ Math.abs(salarySummary.taxDiff ? salarySummary.taxDiff : taxDiff) }}</block>
							<block v-else>0</block>
						</view>
					</view>
					<view class="cu-item">
						<view class="text-gray">补税</view>
						<view class="text-bold text-price text-lg margin-top-xs">
							<block v-if="!isAloneCalcTax && taxDiff > 0">
								{{ Math.abs(salarySummary.taxDiff ? salarySummary.taxDiff : taxDiff) }}</block>
							<block v-else>0</block>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapActions
	} from 'vuex'
	import {
		appMixin
	} from '@/store/app-mixin'
	import {
		accMul,
		accAdd,
		accDiv,
	} from '@/utils/common'
	export default {
		data() {
			return {
				isContainsCompany: false,
				isAloneCalcTax: true
			}
		},
		mixins: [appMixin],
		mounted() {
			// 防止当前页面刷新 丢失返回值
			if (!this.calcResp.salarySummary) {
				this.$store.dispatch('calc')
			}
		},
		computed: {
			taxDiff() {
				// TODO 
				return accAdd(this.salarySummary.summaryComprehensiveTaxAmount, -this.salarySummary.summaryTaxAmount)
					.toFixed(2)
			}
		},
		methods: {
			changeContainsCompany() {
				this.isContainsCompany = !this.isContainsCompany
			},
			toSalaryDetail() {
				uni.navigateTo({
					url: '/pages/home/salaryDetail'
				})
			}
		}
	}
</script>

<style>
</style>